html, body {
	margin: 0;
	padding: 0;
}
.container{
	width: 440px; 
	height: 400px; 
	box-sizing: border-box;
}
.top-rect-block {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(247,247,247,0);
	height: 60px;
	width: 100%;
    border-bottom: 1px solid #DFDFDF;
    position: relative;
}

.filter-input {
	height: 28px;
	width: 440px;
	border: 1px solid #DFDFDF;
	border-radius: 2px;
	background-color: #FFFFFF;
	color: rgba(0,0,0,0.54);
	font-family: Roboto;
	font-size: 14px;
	line-height: 20px;
	padding: 0 0 0 8px;
}


.radio-group-block {
    display: flex;
}

.text-value {
    display: inline-block;
    color: rgba(0,0,0,0.7);
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.radio-block {
    display: flex;
    margin: 0 0 0 12px;
	cursor: pointer;
	align-items: center;
}

.radio {
    font-size: 24px;
    width: 24px;
    height: 24px;
	line-height: 24px;
	color: rgba(0,0,0,0.54);
}

.checked .radio {
    color: #0288D1;
}

.radio-label {
    margin: 0 0 0 4px;
    color: rgba(0,0,0,0.7);
    font-family: Roboto;
    font-size: 14px;
    line-height: 24px;
}

.select-list {
	width: 100px;
	height: 28px;
	border: 1px solid #DFDFDF;
	border-radius: 2px;
	background-color: #FFFFFF;
	margin: 0 40px 0 12px;
	color: rgba(0,0,0,0.7);	
	font-family: Roboto;
	font-size: 14px;
	line-height: 20px;
}

.small-filter-input {
	width: 200px;
	margin: 0 0 0 12px;
}

.wrapper {
    width: 920px;
    height: 320px;
    display: flex;
    margin: 100px auto 0 auto;
    justify-content: space-between;
}

.vault-block, .droparea {
    width: 440px;
    height: 320px;
}

.droparea {
    box-sizing: border-box;
    border: 1px solid #DFDFDF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.droparea-text {
    color: rgba(0,0,0,0.7);
    font-family: Roboto;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.info-line {
    display: flex;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
}

.number-value {
    display: inline-block;
    color: #4C4C4C;
}


.icon-label {
    margin: 0 0 0 8px;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.7);
}

.icon-label::before {
    display: block;
}



/* events sample */
.vault-block, .events-info {
    width: 440px;
    height: 320px;
}

.event {
    box-sizing: border-box;
    width: 100%;
    padding: 4px 4px 0 4px;
}
.info {
    width: 100%;
    border-bottom: 1px solid #cecece;
    padding: 0 8px 4px 8px;
    color:rgba(0,0,0,.38);
    box-sizing: border-box;
}

.events-info {
    font-size: 16px;
    font-family: Roboto, Arial, Helvetica;
    color: #404040;
    overflow: auto;
    border: 1px solid #dfdfdf;
    box-sizing: border-box; 
}

.with-header{
	margin: 50px auto 0 auto;
}

.left-logo-block {
    position: absolute;
    left: 20px;
    top: 12px;
    height: 36px;
    width: 60px;
}

.right-link-block {
    position: absolute;
    right: 20px;
    top: 12px;
}

.dhx-download-link {
    background: #0288D1;
    color: #FFFFFF;
    border-radius: 30px;
    padding: 0 28px 0 28px;
    font-family: Roboto;
    line-height: 36px;
    font-size: 16px;
    font-weight: 500;
    display: block;

    text-decoration: none;
}

.logo-link {
    height: 100%;
    width: 100%;
    display: block;
}
.dhx-logo__svg {
    height: 100%;
    width: 100%;
    fill: #0288D1;
}

.dhx-logo__svg:hover {
    fill: #029bee;
}
.logo-link:active .dhx-logo__svg {
    fill: #017abc;   
}

.dhx-download-link:hover {
    background: #029bee;
}
.dhx-download-link:active {
    background: #017abc;
}

